@borderColor: #aaa;
@activeBgColor: #aaa;

@Blue_color_base: #289DE9;
@Blue_color_font: @Blue_color_base;
@Blue_color_border: @Blue_color_base;
@Blue_bgColor_active: @Blue_color_base;
@Blue_bgColor_hover: #E9F4FC;
@Blue_bgColor_buttonHover: #3CA5EA;

@Green_color_base: #449D44;
@Green_color_font: @Green_color_base;
@Green_color_border: @Green_color_base;
@Green_bgColor_active: @Green_color_base;
@Green_bgColor_hover: #EBF4EB;
@Green_bgColor_buttonHover: #55A555;

@Yellow_color_base: #EC971F;
@Yellow_color_font: @Yellow_color_base;
@Yellow_color_border: @Yellow_color_base;
@Yellow_bgColor_active: @Yellow_color_base;
@Yellow_bgColor_hover: #FDF5E9;
@Yellow_bgColor_buttonHover: #EEA135;

@Red_color_base: #C9302C;
@Red_color_font: @Red_color_base;
@Red_color_border: @Red_color_base;
@Red_bgColor_active: @Red_color_base;
@Red_bgColor_hover: #FAEAEA;
@Red_bgColor_buttonHover: #CE4541;

@S_fontSize: 12px;
@S_minWidth: 26px;
@S_height: 24px;
@S_lineHeight: @S_height;
@S_activeHeight: @S_height + 2;
@S_inputWidth: 26px;
@S_inputHeight: 24px;
@S_buttonMinWidth: 30px;
@S_buttonHeight: 26px;
@S_buttonLineHeight: @S_buttonHeight - 2;
@S_buttonPadding: 0 6px;
@S_navHeight: @S_activeHeight;


@N_fontSize: 14px;
@N_minWidth: 30px;
@N_height: 28px;
@N_lineHeight: @N_height;
@N_activeHeight: @N_height + 2;
@N_inputWidth: 30px;
@N_inputHeight: 28px;
@N_buttonMinWidth: 40px;
@N_buttonHeight: 30px;
@N_buttonLineHeight: @N_buttonHeight - 2;
@N_buttonPadding: 0 8px;
@N_navHeight: @N_activeHeight;


@B_fontSize: 16px;
@B_minWidth: 36px;
@B_height: 34px;
@B_lineHeight: @B_height;
@B_activeHeight: @B_height + 2;
@B_inputWidth: 36px;
@B_inputHeight: 34px;
@B_buttonMinWidth: 50px;
@B_buttonHeight: 36px;
@B_buttonLineHeight: @B_buttonHeight - 2;
@B_buttonPadding: 0 12px;
@B_navHeight: @B_activeHeight;


.paginationjs{
  display: flex;
  line-height: 1.6;
  font-family: "Marmelad", "Lucida Grande", "Arial", "Hiragino Sans GB", Georgia, sans-serif;
  font-size: @N_fontSize;
  box-sizing: initial;
  &:after{
    display: table;
    content: " ";
    clear: both;
  }
  .paginationjs-pages{
    float: left;
    margin-left: 10px;
    ul{
      float: left;
      margin: 0;
      padding: 0;
    }
    li{
      display: inline-block;
      border: 1px solid @borderColor;
      border-right: none;
      list-style: none;
      > a{
        min-width: @N_minWidth;
        height: @N_height;
        line-height: @N_lineHeight;
        display: block;
        background: #fff;
        font-size: @N_fontSize;
        color: #333;
        text-decoration: none;
        text-align: center;
        cursor: pointer;
        &:hover{
          background: #eee;
        }
      }
      &.active{
        border: none;
        > a{
          height: @N_activeHeight;
          line-height: @N_activeHeight;
          background: @activeBgColor;
          color: #fff;
          cursor: default;
        }
      }
      &.disabled{
        > a{
          opacity: .3;
          cursor: default;
          &:hover{
            background: none;
          }
        }
      }
      &:first-child{
        border-radius: 3px 0 0 3px;
        > a{
          border-radius: 3px 0 0 3px;
        }
      }
      &:last-child{
        border-right: 1px solid @borderColor;
        border-radius: 0 3px 3px 0;
        > a{
          border-radius: 0 3px 3px 0;
        }
      }
    }
  }
  .paginationjs-size-changer {
    display: inline-block;
    font-size: @N_fontSize;
    margin-left: 10px;
    > select{
      height: @N_inputHeight;
      background: #fff;
      border-radius: 3px;
      border: 1px solid @borderColor;
      padding: 0;
      font-size: @N_fontSize;
      text-align: center;
      vertical-align: baseline;
      outline: none;
      box-shadow: none;
      box-sizing: initial;
    }
  }
  .paginationjs-go-input{
    display: inline-block;
    margin-left: 10px;
    font-size: @N_fontSize;
    > input[type="text"]{
      width: @N_inputWidth;
      height: @N_inputHeight;
      background: #fff;
      border-radius: 3px;
      border: 1px solid @borderColor;
      padding: 0;
      font-size: @N_fontSize;
      text-align: center;
      vertical-align: baseline;
      outline: none;
      box-shadow: none;
      box-sizing: initial;
    }
  }
  .paginationjs-go-button{
    display: inline-block;
    margin-left: 10px;
    font-size: @N_fontSize;
    > input[type="button"]{
      min-width: @N_buttonMinWidth;
      height: @N_buttonHeight;
      line-height: @N_buttonLineHeight;
      background: #fff;
      border-radius: 3px;
      border: 1px solid @borderColor;
      text-align: center;
      padding: @N_buttonPadding;
      font-size: @N_fontSize;
      vertical-align: baseline;
      outline: none;
      box-shadow: none;
      color: #333;
      cursor: pointer;
      &:hover{
        background-color: #f8f8f8;
      }
    }
  }
  .paginationjs-nav{
    float: left;
    height: @N_navHeight;
    line-height: @N_navHeight;
    font-size: @N_fontSize;
  }

  &.paginationjs-small{
    font-size: @S_fontSize;
    .paginationjs-pages{
      li{
        > a{
          min-width: @S_minWidth;
          height: @S_height;
          line-height: @S_lineHeight;
          font-size: @S_fontSize;
        }
        &.active{
          > a{
            height: @S_activeHeight;
            line-height: @S_activeHeight;
          }
        }
      }
    }
    .paginationjs-size-changer {
      font-size: @S_fontSize;
      > select{
        height: @S_inputHeight;
        font-size: @S_fontSize;
      }
    }
    .paginationjs-go-input{
      font-size: @S_fontSize;
      > input[type="text"]{
        width: @S_inputWidth;
        height: @S_inputHeight;
        font-size: @S_fontSize;
      }
    }
    .paginationjs-go-button{
      font-size: @S_fontSize;
      > input[type="button"]{
        min-width: @S_buttonMinWidth;
        height: @S_buttonHeight;
        line-height: @S_buttonLineHeight;
        padding: @S_buttonPadding;
        font-size: @S_fontSize;
      }
    }
    .paginationjs-nav{
      height: 26px;
      line-height: 26px;
      font-size: @S_fontSize;
    }
  }
  &.paginationjs-big{
    font-size: @B_fontSize;
    .paginationjs-pages{
      li{
        > a{
          min-width: @B_minWidth;
          height: @B_height;
          line-height: @B_lineHeight;
          font-size: @B_fontSize;
        }
        &.active{
          > a{
            height: @B_activeHeight;
            line-height: @B_activeHeight;
          }
        }
      }
    }
    .paginationjs-size-changer {
      font-size: @B_fontSize;
      > select{
        height: @B_inputHeight;
        font-size: @B_fontSize;
      }
    }
    .paginationjs-go-input{
      font-size: @B_fontSize;
      > input[type="text"]{
        width: @B_inputWidth;
        height: @B_inputHeight;
        font-size: @B_fontSize;
      }
    }
    .paginationjs-go-button{
      font-size: @B_fontSize;
      > input[type="button"]{
        min-width: @B_buttonMinWidth;
        height: @B_buttonHeight;
        line-height: @B_buttonLineHeight;
        padding: @B_buttonPadding;
        font-size: @B_fontSize;
      }
    }
    .paginationjs-nav{
      height: @B_navHeight;
      line-height: @B_navHeight;
      font-size: @B_fontSize;
    }
  }

  > :first-child {
    margin-left: 0;
  }
}

.paginationjs{
  &.paginationjs-theme-blue{
    .paginationjs-pages{
      li{
        border-color: @Blue_color_border;
        > a{
          color: @Blue_color_font;
          &:hover{
            background: @Blue_bgColor_hover;
          }
        }
        &.active{
          > a{
            background: @Blue_bgColor_active;
            color: #fff;
          }
        }
        &.disabled > a:hover{
            background: none;
        }
      }
    }
    .paginationjs-size-changer {
      > select{
        border-color: @Blue_color_border;
      }
    }
    .paginationjs-go-input{
      > input[type="text"]{
        border-color: @Blue_color_border;
      }
    }
    .paginationjs-go-button{
      > input[type="button"]{
        background: @Blue_bgColor_active;
        border-color: @Blue_color_border;
        color: #fff;
        &:hover{
          background-color: @Blue_bgColor_buttonHover;
        }
      }
    }
  }
}

.paginationjs{
  &.paginationjs-theme-green{
    .paginationjs-pages{
      li{
        border-color: @Green_color_border;
        > a{
          color: @Green_color_font;
          &:hover{
            background: @Green_bgColor_hover;
          }
        }
        &.active{
          > a{
            background: @Green_bgColor_active;
            color: #fff;
          }
        }
        &.disabled > a:hover{
          background: none;
        }
      }
    }
    .paginationjs-size-changer {
      > select{
        border-color: @Green_color_border;
      }
    }
    .paginationjs-go-input{
      > input[type="text"]{
        border-color: @Green_color_border;
      }
    }
    .paginationjs-go-button{
      > input[type="button"]{
        background: @Green_bgColor_active;
        border-color: @Green_color_border;
        color: #fff;
        &:hover{
          background-color: @Green_bgColor_buttonHover;
        }
      }
    }
  }
}

.paginationjs{
  &.paginationjs-theme-yellow{
    .paginationjs-pages{
      li{
        border-color: @Yellow_color_border;
        > a{
          color: @Yellow_color_font;
          &:hover{
            background: @Yellow_bgColor_hover;
          }
        }
        &.active{
          > a{
            background: @Yellow_bgColor_active;
            color: #fff;
          }
        }
        &.disabled > a:hover{
          background: none;
        }
      }
    }
    .paginationjs-size-changer {
      > select{
        border-color: @Yellow_color_border;
      }
    }
    .paginationjs-go-input{
      > input[type="text"]{
        border-color: @Yellow_color_border;
      }
    }
    .paginationjs-go-button{
      > input[type="button"]{
        background: @Yellow_bgColor_active;
        border-color: @Yellow_color_border;
        color: #fff;
        &:hover{
          background-color: @Yellow_bgColor_buttonHover;
        }
      }
    }
  }
}

.paginationjs{
  &.paginationjs-theme-red{
    .paginationjs-pages{
      li{
        border-color: @Red_color_border;
        > a{
          color: @Red_color_font;
          &:hover{
            background: @Red_bgColor_hover;
          }
        }
        &.active{
          > a{
            background: @Red_bgColor_active;
            color: #fff;
          }
        }
        &.disabled > a:hover{
          background: none;
        }
      }
    }
    .paginationjs-size-changer {
      > select{
        border-color: @Red_color_border;
      }
    }
    .paginationjs-go-input{
      > input[type="text"]{
        border-color: @Red_color_border;
      }
    }
    .paginationjs-go-button{
      > input[type="button"]{
        background: @Red_bgColor_active;
        border-color: @Red_color_border;
        color: #fff;
        &:hover{
          background-color: @Red_bgColor_buttonHover;
        }
      }
    }
  }
}

/* Hacks for IE 6~9 */
.paginationjs{
  .paginationjs-pages{
    li{
      > a{

      }
      &.paginationjs-next{
        *border-right: 1px solid @borderColor;
        border-right: 1px solid #aaa\0;
      }
    }
  }
  .paginationjs-size-changer{
    *margin-left: 5px;
    margin-left: 5px\0;
    > select{
      *line-height: @N_inputHeight;
      line-height: 28px\0;
      *vertical-align: middle;
      vertical-align: middle\0;
    }
  }
  .paginationjs-go-input{
    *margin-left: 5px;
    margin-left: 5px\0;
    > input[type="text"]{
      *line-height: @N_inputHeight;
      line-height: 28px\0;
      *vertical-align: middle;
      vertical-align: middle\0;
    }
  }
  .paginationjs-go-button{
    *margin-left: 5px;
    margin-left: 5px\0;
    > input[type="button"]{
      *vertical-align: middle;
      vertical-align: middle\0;
    }
  }
  &.paginationjs-big{
    .paginationjs-pages{
      li{
        > a{
          line-height: 36px\0;
        }
      }
    }
    .paginationjs-go-input{
      > input[type="text"]{
        *height: 35px;
        height: 36px\0;
        *line-height: 36px;
        line-height: 36px\0;
      }
    }
  }
}
